@use "design-system";

.snap-ui-renderer {
  $height-screen-sm-min: 720px;
  $width-screen-sm-min: 85vw;
  $width-screen-md-min: 80vw;
  $width-screen-lg-min: 62vw;

  &__container {
    & > *:first-child {
      gap: 16px;
      // Note: Do not replace margin with padding
      // @see {@link https://github.com/MetaMask/metamask-extension/pull/29385}
      margin: 16px;
    }
  }

  &__content {
    flex: 1 1 auto;
  }

  &__spinner {
    width: 30px;
  }

  &__divider {
    width: 100%;
    height: 1px;
  }

  &__input > .mm-text-field {
    min-height: 48px;
    border-radius: 8px;
    border-color: var(--color-border-muted);

    & .mm-icon {
      top: 0;
    }

    .mm-text--overflow-wrap-anywhere {
      overflow-wrap: normal;
    }

    .snap-ui-renderer__image {
      min-width: 24px;
      max-width: 36px;
      min-height: 24px;
      max-height: 36px;
    }
  }

  &__address-input > .mm-text-field {
    border-color: var(--color-border-muted);
  }

  &__panel {
    gap: 8px;
  }

  &__text {
    i {
      font-style: revert;
    }

    b {
      font-weight: revert;
    }

    span {
      font-style: inherit;
      font-weight: inherit;
    }
  }

  &__image {
    max-width: 100%;
  }

  &__footer {
    box-shadow: var(--shadow-size-md) var(--color-shadow-default);
    height: 80px;
    position: fixed;
    bottom: 0;
    margin-top: auto;
    transition: bottom 0.3s ease-in-out;

    @include design-system.screen-sm-min {
      max-width: $width-screen-sm-min;
    }

    @include design-system.screen-md-min {
      max-width: $width-screen-md-min;
    }

    @include design-system.screen-lg-min {
      max-width: $width-screen-lg-min;
    }
  }
  // footer may exist as a sibling of the content, or a child of the content. When it is a child,
  // we need to adjust the max-width to account for the content border.
  &__content {
    .snap-ui-renderer__footer {
      @include design-system.screen-sm-min {
        max-width: calc($width-screen-sm-min - 2px);
      }

      @include design-system.screen-md-min {
        max-width: calc($width-screen-md-min - 2px);
      }

      @include design-system.screen-lg-min {
        max-width: calc($width-screen-lg-min - 2px);
      }
    }
  }


  &__panel.box--flex-direction-row {
    .snap-ui-renderer__field {
      flex: 1 1 50%; // Ensure that adjacent form elements take up to 50% width

      // Asset Selector small state
      .snap-ui-renderer__asset-selector {
        padding-left: 8px;
        padding-right: 8px;

        .snap-ui-renderer__asset-selector-option__balance {
          display: none; // Hide the balance in the asset selector selected value
        }
      }
    }
  }
}

// Additional adjustments for interactive components disabled states
.snap-ui-renderer,
.snap-ui-renderer__content {
  [disabled] {
    cursor: not-allowed !important;
  }

  .mm-text-field--disabled,
  .toggle-button--disabled,
  .toggle-button--disabled *div {
    cursor: not-allowed;
  }

  // Override DS text field component's disabled state (we deliberately do not want to adjust opacity on labels)
  .mm-form-text-field--disabled label {
    opacity: 1;
  }
}

.snap-ui-snap-ui-renderer__file-input__drop-zone--disabled,
.snap-ui-renderer__radio-label--disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}
